<template>
  <div class="AddSub">
    <el-form v-loading="loading" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form">
      <el-form-item label="专题类型:" prop="type">
        <el-radio-group  v-model="ruleForm.sort">
          <el-radio label="0">类型一</el-radio>
          <el-radio disabled label="1">类型二</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="专题名称:" prop="name">
        <el-input class="ipt" maxlength="30" size="small" clearable placeholder="请输入专题名称" v-model.trim="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="专题背景:" prop="background">
        <el-form-item >
          <el-radio-group class="radGroup" @change="selectColor" v-model="ruleForm.backgroundType">
            <el-radio class="rad" :label="0">
              <span>纯背景色</span>
              <el-color-picker v-show="ruleForm.backgroundType == 0 " class="colors" v-model="ruleForm.background"></el-color-picker>
            </el-radio>
            <el-radio class="rad" :label="1">
              <span>静态图片</span>
              <img :src="selectUrl" class="selectedImg" alt="" @click="imgBoxShow = !imgBoxShow" v-show="ruleForm.backgroundType == 1 ">
              <transition name="bounce">
                <div class="ImgBox" v-show="imgBoxShow">
                  <div class="imgList">
                    <img class="imgs" :class="{selectImg: current == index}" @click="selectImg(index,item)" v-for="(item,index) in imgList" :key="index" :src="item.pic" alt="">
                  </div>
                  <div class="texts">
                    <el-button size="mini" type="text" @click="cancleImg">取消</el-button>
                    <el-button type="primary" size="mini" @click="doImg">确定</el-button>
                  </div>
                </div>
              </transition>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form-item>
      <el-tabs class="tabs" :editable="editableTabs.length!=1" addable v-model="editableTabsValue" type="card" @edit="handleTabsEdit">
        <el-tab-pane
          :key="item.name"
          v-for="item in editableTabs"
          :label="item.title"
          :name="item.name"
        >
          <el-form-item label="段落类型:" prop="passagesType">
            <el-radio-group  v-model="item.passagesType">
              <el-radio label="0">静态图片+产品</el-radio>
              <el-radio label="1">banner图+产品</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row v-if="item.passagesType == '0'">
            <el-col :span="10">
              <el-form-item class="quietImg" label="静态图片:" required>
                <el-upload
                  class="upload-demo"
                  ref="upd"
                  accept="image/png,image/jpeg"
                  :limit="1"
                  list-type="picture"
                  :action= setUrl
                  :headers="headers"
                  :file-list="item.fileOne"
                  :on-success="successUp"
                  :on-error="errorUp"
                  :before-upload="beforeUpd"
                  :on-remove="removeImg"
                  :on-exceed="handleExceed"
                >
                  <el-button size="small" type="primary"
                    >点击上传</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，不大于500k
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item v-else label="banner图:" required>
            <el-row >
              <el-col :span="13" >
                  <el-upload
                    class="upload-demo"
                    ref="updMore"
                    accept="image/png,image/jpeg"
                    :file-list="item.fileList"
                    :action= setUrl
                    list-type="picture"
                    :headers="headers"
                    :on-success="successUpList"
                    :on-error="errorUp"
                    :before-upload="beforeUpd"
                    :on-remove="handleRemove"
                  >
                    <el-button  size="small" type="primary" >+</el-button> 
                    <span slot="tip" class="el-upload__tip">
                     添加banner图，请保证所有图片高宽一致，仅限png/jpg文件，不超过500k
                    </span>
                  </el-upload>
              </el-col>
              <el-col class="iptUrl" :class="{firstCol:index == 0}" v-for="(ele,index) in item.fileList.length" :key="ele" :span="11" >
                banner链接:   <el-input class="ipt" clearable :data-num="index" size="small" @blur="iptUrls"  placeholder="请输入banner链接" v-model.trim="item.iptList[index]"></el-input>
                <p class="output"></p>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="段落产品:" required>
            <span>已添加 {{item.selectionList.length}} 个产品</span>
            <el-table
              v-loading="loading"
              :data="item.selectionList"
              :fit="true"
              ref="tabList"
              @sort-change="sortList"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                align="center"
                prop="goodId"
                label="产品编号"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="goodName"
                label="产品名称"
              ></el-table-column>
              <el-table-column
                align="center"
                label="产品状态"
                prop="goodStatus"
                width="80"
              >
                <template slot-scope="scope">{{
                  scope.row.goodStatus == "0" ? "已上架 " : "已下架"
                }}</template>
              </el-table-column>
              <el-table-column sortable  align="center" prop="marketPrice" label="现/划线价">
                <template slot-scope="scope"
                  >{{ scope.row.marketPrice / 100 }} /
                  {{ scope.row.originalPrice / 100 }}</template
                >
              </el-table-column>
              <el-table-column
                align="center"
                prop="gmtCreate"
                label="添加时间"
                width="130"
              >
                <template slot-scope="scope">
                  {{ scope.row.gmtCreate | timeFilter }}
                </template>
              </el-table-column>
              <el-table-column  align="center" label="操作" width="130">
                <template slot-scope="scope">
                  <i @click="goDel(scope.row)" class="el-icon-delete"></i>
                </template>
              </el-table-column>
            </el-table>
            <div @click="goAdd" class="add">+  继续添加</div>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-col :span="24" style="text-align:right">
          <el-button type="primary" @click="submitForm('ruleForm')">保存并生成预览</el-button>
          <el-button @click="resetForm('ruleForm')">返回</el-button>
        </el-col>
      </el-form-item>
    </el-form>

    <!-- 添加产品弹窗 -->
    <el-dialog
      title="添加产品"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="60%"
      class="addDialog"
      >
      <el-input class="iptSmall" size="small" ref="ipt" clearable placeholder="请输入要查询的产品名称/编码" v-model.trim="search.nameOrId"></el-input>
      <el-button type="primary" size="small" @click="doSearch">查 询</el-button>
      <el-table
        v-loading="loading"
        :data="goodsList"
        ref="multipleTable"
        :fit="true"
        highlight-current-row
        @selection-change="handleSelectionChange"
        :before-close="handleClose"
        style="width: 100%;margin-top:10px"
        height="300"
      >
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <el-table-column
          align="center"
          prop="goodId"
          label="产品编码"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="goodName"
          label="产品名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="产品状态"
          prop="goodStatus"
          width="80"
        >
          <template slot-scope="scope">{{
            scope.row.goodStatus == "0" ? "已上架 " : "已下架"
          }}</template>
        </el-table-column>
        <el-table-column sortable align="center" prop="marketPrice" label="现/划线价">
          <template slot-scope="scope"
            >{{ scope.row.marketPrice / 100 }} /
            {{ scope.row.originalPrice / 100 }}</template
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="channel"
          label="产品来源"
          width="100"
        >
        <template slot-scope="scope">{{
            scope.row.channel == "A" ? "健投 " : "拜博"
          }}</template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right; margin-top: 20px"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-size="page.limit"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancle">取 消</el-button>
        <el-button size="small" type="primary" @click="doSure">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览弹窗 -->
    <el-dialog
      title="专题预览"
      :visible.sync="seeVisible"
      class="addDialog dialogSee"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="closeSee"
      width="40%"
      >
      <iframe :src="iframUrl" height="400" width="100%"></iframe >
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancleSee">取消</el-button>
        <el-button size="small" type="primary" @click="dialoagDo">确认</el-button>
        <el-button size="small" type="primary" @click="dialogCopy">确认并复制链接</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import topicApi from "@/api/lejv/topic";
import { getToken , removeToken, removeInfo} from "@/utils/auth";
import _ from "lodash"; //引入lodash
export default {
  name: "AddSub",
  data() {
    var checkBgc = (rule, value, callback) => { //自定义校验规则,验证是否添加图片  blur和change时间无法触发
      if (this.ruleForm.backgroundType == 0) {
        if (this.ruleForm.background == '' || this.ruleForm.background == undefined ) {
          return callback(new Error("请添加背景颜色!"));
        }
        callback()
      }else{
        callback()
      }
    };
    return {
      loading:false,
      isRightUrl:true,
      imgBoxShow:false,
      dialogVisible:false,
      seeVisible:false,
      current:0,
      id:"",
      selectUrl:"",
      mainUrl:"",
      checkedUrl:"",
      imgList:[],
      iframUrl:"", //预览框地址
      changeList:[], //多选添加的产品
      setUrl:"",//上传图片地址
      headers: { Authorization: getToken() }, //上传图片携带token
      search: {
        nameOrId: "",
      },
      editableTabsValue: '1',//当前激活的段落
      editableTabs: [{
        title: '段落 1',
        name: '1',
        content: '', //tab组件自带,可去掉
        passagesType:"0",
        iptList:[], //banner链接数组
        fileList:[], //banner图片数组
        fileOne:[], //静态图片
        selectionList:[], //添加的产品
        goodIds:[], //添加的产品id列表
        sectionPics:[],
        id:""
      }],//段落数组
      tabIndex: 1,//标记段落name
      ruleForm: {
        name: '',
        sort:"0",
        background:"#1AB53C",
        backgroundType:0,
        previewPic:"http://tklifeacuat.mobile.taikang.com/tkproDetails/bannerTemplate"
      },
      rules: {
        name: [
          { required: true, message: '请输入专题名称', trigger: 'blur' }
        ],
        background:[
          {required: true,validator: checkBgc, trigger: "blur"}
        ]
      },
      goodsList: [],
      page: {
        start: 1,
        limit: 5,
        total: 10,
      },
    };
  },
  computed: {},
  created() {
    this.setUrl = window.location.host.indexOf('tk') != -1 ? (window.location.protocol + "//" + window.location.host + "/file/image/auth") : "http://tklifeacuat.mobile.taikang.com/file/image/auth"
    this.mainUrl = window.location.host.indexOf('tk') != -1 ? (window.location.protocol + "//" + window.location.host + "/tkproDetails/bannerTemplate?id=") : "http://tklifeacuat.mobile.taikang.com/tkproDetails/bannerTemplate?id="
    this.getImgList()
  },
  mounted() {},
  filters:{
    timeFilter(times){
      let timer = new Date(times).toJSON();
      return new Date(new Date(timer).getTime() + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "")
        .slice(0,10);
    }
  },
  methods: {
    //搜索
    doSearch() {
      this.page.start = 1
      this.getList();
    },
    //输入框限制只能输入网址
    iptUrls(Event){
      // console.log(Event.target.dataset);
      let currentNum = Event.target.dataset.num
      let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])/;
      if (!reg.test(Event.target.value) && Event.target.value) {
        document.getElementsByClassName("output")[currentNum].innerHTML = "请输入以http/https开头的网址!";
        this.isRightUrl = false
      }else{
        document.getElementsByClassName("output")[currentNum].innerHTML = "";
        this.isRightUrl = true
      }
    },
    //选择图片
    selectImg(val,item){
      // console.log(val);
      this.current = val
      this.checkedUrl = item.pic
    },
    //确定选择图片
    doImg(){
      this.selectUrl = this.checkedUrl
      this.cancleImg()
    },
    //取消选择
    cancleImg(){
      this.imgBoxShow = false
      if(this.selectUrl == ""){
        this.current = 99
      }else{
        let index = this.imgList.findIndex(item => item.pic == this.selectUrl)
        this.current = index
      }
    },
    //获取静态图片列表
    async getImgList(){
      this.loading = true
      let datas = await topicApi.imgList()
      .then(res=>{
        // console.log(res);
        if(res.code == 0){
          this.imgList = res.data
          if(this.ruleForm.backgroundType == 0){
            this.selectUrl = this.imgList[0].pic
          }
          this.getInfo()
        }
        this.loading = false
      })
      .catch(res=>{
        // console.log(res);
        this.loading = false
        this.$message({
          type:"error",
          message:"获取数据失败!"
        })
      })
    },
    //表格排序
    sortList(){
      let num  = Number(this.editableTabsValue)
      this.editableTabs[num-1].selectionList = this.$refs.tabList[num-1].tableData
      this.editableTabs[num-1].goodIds = []
      for(let i = 0;i<this.editableTabs[num-1].selectionList.length;i++){
        this.editableTabs[num-1].goodIds.push(this.editableTabs[num-1].selectionList[i].goodId)
      }
    },
    //获取专题详情  转化数据格式
    getInfo(){
      this.loading = true
      let id = this.$route.params.editId
      if(id){
        topicApi.getTopicInfo(id)
        .then(res=>{
          console.log(res);
          if(res.code == 0){
            this.ruleForm.sort = res.data.sort
            this.ruleForm.name = res.data.name
            this.ruleForm.background = res.data.background
            this.ruleForm.backgroundType = Number(res.data.backgroundType)
            this.ruleForm.id = res.data.id
            if(res.data.previewPic && res.data.previewPic != ""){
              this.ruleForm.previewPic = res.data.previewPic
            }
            if(this.ruleForm.backgroundType == 1){
              this.selectUrl = this.ruleForm.background
              this.current = this.imgList.findIndex(item => item.pic == this.ruleForm.background)
              // console.log(this.current);
            }
            let data = JSON.parse(JSON.stringify(res.data.topicSubInfos)) 
            if(data && data.length>1){
              for(let i = 1;i<data.length;i++){
                let newTabName = ++this.tabIndex + '';
                let obj = {
                  title: '段落 '+this.tabIndex ,
                  name: newTabName,
                  content: '',
                  passagesType:"0",
                  iptList:[],
                  fileList:[],
                  fileOne:[],
                  selectionList:[],
                  goodIds:[],
                  sectionPics:[],
                  id:""
                }
                this.editableTabs.push(obj);
              }
            }
            for(let i = 0;i<data.length;i++){
              this.editableTabs[i].passagesType = data[i].passagesType
              this.editableTabs[i].selectionList = data[i].goods
              this.editableTabs[i].sectionPics = data[i].sectionPics
              this.editableTabs[i].id = data[i].id
              if(data[i].sectionPics.length!=0){
                for(let j = 0;j<data[i].sectionPics.length;j++){
                  if(this.editableTabs[i].passagesType == "1"){
                    this.editableTabs[i].fileList[j] = data[i].sectionPics[j]
                    this.editableTabs[i].iptList.push(data[i].sectionPics[j].url)
                    this.editableTabs[i].fileList[j].url = data[i].sectionPics[j].pic
                    this.editableTabs[i].fileList[j].name = data[i].sectionPics[j].name
                  }else{
                    this.editableTabs[i].fileOne = data[i].sectionPics
                    this.editableTabs[i].fileOne[j].url = data[i].sectionPics[j].pic
                    this.editableTabs[i].fileOne[j].name = data[i].sectionPics[j].name
                    this.editableTabs[i].passagesType = "4"
                    setTimeout(()=>{  //解决数据变化,视图未更新  watch深度监听不好使
                      this.editableTabs[i].passagesType = "0"
                    },100)
                  }
                }
              }
              for(let h = 0;h<data[i].goods.length;h++){
                this.editableTabs[i].goodIds.push(data[i].goods[h].goodId)
              }
            }
            this.loading = false
            console.log(this.editableTabs,this.ruleForm);
          }
        })
        .catch(res=>{
          // console.log(res);
          this.loading = false
          this.$message({
            type:"error",
            message:"获取数据失败!"
          })
        })
      }
    },
    //获取列表
    getList() {
      this.loading = true;
      let params = {
        pageSize: this.page.limit,
        pageNum: this.page.start,
        ...this.search,
      };
      params = _.pickBy(params, (item) => item); //使用lodash进行过滤参数为空的搜索条件
      topicApi
        .NogoodsList(params)
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.loading = false;
            this.goodsList = JSON.parse(JSON.stringify(res.data.goods));
            this.page.total = res.data.totalElements
          }else{
            this.loading = false;
            this.page.total = 0
            this.goodsList = []
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    //删除
    goDel(val) {
      let num  = Number(this.editableTabsValue)
      this.$confirm("将从列表中删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.editableTabs[num-1].selectionList = this.editableTabs[num-1].selectionList.filter((item) => item.goodId != val.goodId);
          let index = this.editableTabs[num-1].goodIds.findIndex(item => item == val.goodId)
          this.editableTabs[num-1].goodIds.splice(index,1)
          console.log(this.editableTabs[num-1].selectionList,this.editableTabs[num-1].goodIds);
          
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!",
          });
        });
    },
    //保存提交  根据后台字段  调整数据格式
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api = null
          let isOneGood = false
          if(this.$route.params.editId){
            api =  topicApi.UpdateTopic  //编辑
          }else{
            api = topicApi.AddTopic  //新增
          }
          let objs = {
            ...this.ruleForm,
            topicSubInfos:[]
          }
          if(objs.backgroundType == 1){
            objs.background = this.selectUrl
          }
          for(let i = 0;i<this.editableTabs.length;i++){
            let item = {
              passagesType:"",
              goodIds:"",
              sectionPics:[]
            }
            item.passagesType = this.editableTabs[i].passagesType
            item.goodIds = this.editableTabs[i].goodIds.join(",")
            if(this.editableTabs[i].goodIds.length<1){
              isOneGood = true
            }
            if(this.$route.params.editId){
                item.id = this.editableTabs[i].id
              }
            objs.topicSubInfos.push(item)
            let new_arr = []
            if(item.passagesType == "1"){
              new_arr = this.editableTabs[i].fileList
            }else{
              new_arr = this.editableTabs[i].fileOne
            }
            for(let j = 0;j<new_arr.length;j++){
              let itn = {
                pic:"",
                name:''
              }
              itn.pic = new_arr[j].url
              itn.name = new_arr[j].name
              if(item.passagesType == "1"){
                itn.url = this.editableTabs[i].iptList[j]
              }
              if(this.$route.params.editId){
                if(new_arr[j].id){
                  itn.id = new_arr[j].id
                }
              }
              objs.topicSubInfos[i].sectionPics.push(itn)
            }
          }
          console.log(objs);
          let noTwo = false
          let isOne = false
          for(let i = 0;i<objs.topicSubInfos.length;i++){
            if(objs.topicSubInfos[i].passagesType == "1" && objs.topicSubInfos[i].sectionPics.length<2){
              noTwo = true
            }else if(objs.topicSubInfos[i].passagesType == "0" && objs.topicSubInfos[i].sectionPics.length == 0){
              isOne = true
            }
          }
          if(noTwo){
            this.$message({
              type:"warning",
              message:"请至少上传2张banner图!"
            })
          }else if(isOne){
            this.$message({
              type:"warning",
              message:"请上传1张静态图片!"
            })
          }else if(isOneGood){
            this.$message({
              type:"warning",
              message:"请至少添加一个产品!"
            })
          }else if(this.isRightUrl){
            api(objs) 
            .then(res=>{
              console.log(res);
              if(res.code == 0){
                this.$message({
                  type:"success",
                  message:"提交成功!"
                })
                this.seeVisible = true
                noTwo = false
                isOneGood = false
                if(res.data){
                  this.id = res.data.id
                }else{
                  this.id = this.$route.params.editId
                }
                this.iframUrl = this.mainUrl + this.id;
                // console.log(this.iframUrl);
              }
            })
            .catch(res=>{
              this.$message({
                type:"error",
                message:"提交失败!"
              })
              noTwo = false
              isOneGood = false
            })
          }
        } else {
          this.$message({
            type:'warning',
            message:"请填写完整信息!"
          })
          return false;
        }
      });
    },
    //返回重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("/content/subject")
    },
    //选择专题背景
    selectColor(val){
      // console.log(val);
      if(this.imgBoxShow){
        this.imgBoxShow = false
      }      
    },
    //段落事件 添加新段落 往数组内push空模板对象
    handleTabsEdit(targetName, action) {
      console.log(targetName,this.editableTabsValue);
      //添加段落 重置段落内容
      if (action === 'add') {
        if(this.editableTabs.length>0){  //添加时 若存在删除操作 则添加的新段落名在前一个段落基础上累加
          this.tabIndex = this.editableTabs[this.editableTabs.length-1].name
        }else{
          this.tabIndex = 0
          this.editableTabsValue = "0"
        }
        let newTabName = ++this.tabIndex + '';
        let obj = {
          title: '段落 '+this.tabIndex ,
          name: newTabName,
          content: '',
          passagesType:"0",
          iptList:[],
          fileList:[],
          fileOne:[],
          selectionList:[],
          goodIds:[],
          sectionPics:[],
          id:""
        }
        this.editableTabs.push(obj);
        this.editableTabsValue = newTabName;
      }
      //删除段落 对tab组件原来方法进行修改(修改删除组件 段落名不会自动递减排序)
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        tabs.forEach((tab, index) => {
          let nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        });
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        this.editableTabs.forEach((tab, index) => {
          tab.name = index + 1 + '' 
          tab.title = '段落 '+ tab.name
        });
        this.editableTabsValue = activeName;
      }
    },
    //上传banner图片列表
    successUpList(file, fileList) {
      fileList.url = file
      let num  = Number(this.editableTabsValue)
      this.editableTabs[num-1].fileList.push(fileList)
      console.log(file, fileList);
      this.$message({
        type: "success",
        message: "上传成功!",
      });
    },
    // 上传静态图片
    successUp(val,file, fileList){
      file.url = val
      let num  = Number(this.editableTabsValue)
      this.editableTabs[num-1].fileOne = fileList
      this.$message({
        type: "success",
        message: "上传成功!",
      });
    },
    //上传失败
    errorUp(val){
      if(val.status == 401){
        this.$message({
          type: "error",
          message: "登陆超时,请重新登陆!",
        });
        setTimeout(()=>{
          removeInfo();
          removeToken();
          this.$router.push("/login");
        },2000)
      }else{
        this.$message({
          type: "error",
          message: "上传失败!",
        });
      }
    },
    //超出限制
    handleExceed(files){
      this.$message({
        type: "warning",
        message: "只能上传一张静态图片!",
      });
    },
    //上传图片验证
    beforeUpd(file) {
      // console.log(file);
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const fileType =
        testmsg.toLowerCase() === "jpg" ||
        // testmsg.toLowerCase() === "jpeg" ||
        testmsg.toLowerCase() === "png";
      const fileLimit = file.size / 1024 < 500;
      if (!fileType) {
        this.$message({
          message: "上传图片只能是jpg / png 格式!",
          type: "error",
        });
        return false; //必须加上return false; 才能阻止
      }
      if (!fileLimit) {
        this.$message({
          message: "上传失败，请上传不大于500k的图片文件!",
          type: "error",
        });
        return false;
      }
      return fileLimit || fileType;
    },
    //banner移除图片
    handleRemove(file, fileList) {
      let num  = Number(this.editableTabsValue)
      let count = this.editableTabs[num-1].fileList.findIndex(item => item.uid == file.uid)
      this.editableTabs[num-1].iptList.splice(count,1)
      this.editableTabs[num-1].fileList = fileList
    },
    //移除图片
    removeImg(file,fileList){
      let num  = Number(this.editableTabsValue)
      this.editableTabs[num-1].fileOne = fileList
    },
    //表格多选
    handleSelectionChange(val) {
      this.changeList = val;
    },
    //继续添加
    goAdd(){
      this.dialogVisible = true
      this.getList()
    },
    //弹窗取消
    cancle(){
      this.dialogVisible = false
      if(this.$refs.ipt){
        this.$refs.ipt.clear()
        this.$refs.multipleTable.clearSelection()
      }
    },
    //弹窗确认
    doSure(){
      // 合并数组,去重
      let _arr = new Array();
      let ids = new Array();
      let num  = Number(this.editableTabsValue)
      let arr = this.editableTabs[num-1]
      for (let i = 0; i < arr.selectionList.length; i++) {
        _arr.push(arr.selectionList[i]);
        ids.push(arr.selectionList[i].goodId)
      }
      for (let i = 0; i < this.changeList.length; i++) {
        var flag = true;
        for (let j = 0; j < arr.selectionList.length; j++) {
          if (this.changeList[i].goodId == arr.selectionList[j].goodId) {
            flag = false;
            break;
          }
        }
        if (flag) {
          _arr.push(this.changeList[i]);
          ids.push(this.changeList[i].goodId)
        }
      }
      this.editableTabs[num-1].selectionList = _arr
      this.editableTabs[num-1].goodIds = ids
      // console.log(this.selectionList ,this.changeList);
      this.cancle()
      this.changeList = []
      this.page.start = 1
    },
    //关闭表格弹窗
    handleClose(){
      this.cancle()
    },
    //弹窗取消按钮
    cancleSee(){
      if(this.$route.params.editId){
        this.seeVisible = false
      }else{
        this.$router.push({name:'EditSub',params: { editId:this.id} })
      }
      this.iframUrl = ""
    },
    //预览弹窗关闭
    closeSee(){
      this.cancleSee()
    },
    //关闭弹窗功能
    dialogCancle(){
      this.seeVisible = false
      this.$router.push("/content/subject")
    },
    //弹窗确认按钮
    dialoagDo(){
      this.dialogCancle()
    },
    //弹窗复制
    dialogCopy(){
      let oInput = document.createElement("input");
      oInput.value = this.iframUrl;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      // console.log(oInput.value);
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
          message: "已成功复制专题链接",
          type: "success",
      });
      oInput.remove();
      setTimeout(()=>{
        this.dialogCancle()
      },500)
    },
    //分页
    handleCurrentChange(val) {
      this.page.start = val;
      this.getList();
    },
  }
};
</script>

<style lang="scss" >
.el-loading-mask {
  z-index: 90;
}
</style>
<style scoped lang="scss">
.AddSub {
  padding:0 20px;
  //图片列表弹窗动画
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
  .form{
    margin-top: 20px;
    .ipt{
      width: 300px;
    }
    .iptUrl{
      margin-top: 30px;
      line-height: 40px;
      position: relative;
      .output{
        position: absolute;
        color: red;
        font-size: 8px;
        right: 150px;
        top: 20px;
      }
    }
    .add{
      cursor: pointer;
      width: 80px;
      text-align: center;
      margin-top: 10px;
      &:hover{
        background-color: #F3F3F3;
      }
    }
    .el-upload__tip{
      margin-left: 10px;
    }
    ::v-deep.el-upload-list--picture .el-progress{
      top: 10px;
    }
    ::v-deep.el-upload-list{
      width: 400px;
    }
    ::v-deep.el-table{
      margin-left: -60px;
    }
    .el-icon-delete{
      color: red;
      cursor: pointer;
      &:hover{
        background-color: #F56C6C;
        border-radius: 3px;
        color: #FFFFFF;
        width: 25px;
        line-height: 20px;
      }
    }
    .firstCol{
      margin-top: 60px;
    }
    ::v-deep.el-tabs__header{
      margin: 20px;
    }
    ::v-deep.el-tabs__new-tab{
      margin: 0;
      width: 36px;
      height: 36px;
      line-height: 36px;
    }
    ::v-deep.el-icon-plus{
      transform: scale(2,2)
    }
    .radGroup{
      display: flex;
      align-items: center;
      position: relative;
      ::v-deep.el-radio__label,.rad{
        display: flex;
        align-items: center;
        img{
          margin-left: 20px;
          width: 40px;
          height: 40px;
          object-fit: contain;
        }
        .selectedImg{
          border: 3px solid #e6e6e6;
          border-radius: 5px;
          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
          object-fit: cover;
        }
      }
      .ImgBox{
        position: absolute;
        left: 160px;
        background-color: #FFF;
        border: 1px solid #EBEEF5;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        width: 210px;
        z-index: 90;
        border-radius: 10px;
        .imgList{
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin: 10px 0 40px 0;
          img{
            margin-bottom: 20px;
          }
        }
        .selectImg{
          width: 40px!important;
          height: 40px!important;
          object-fit: cover;
          border: 3px solid #e1e9e1;
          border-radius: 5px;
          box-shadow: 0 2px 12px 0 rgba(18, 157, 238, 0.7);
        }
        .texts{
          position: absolute;
          bottom: 10px;
          right: 10px;
        }
      }
    }
    .colors{
      margin-left: 20px;
    }
  }
  ::v-deep.el-table .cell {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ::v-deep.el-upload-list__item{
    height: 60px;
      img {
      width: 80px;
      height: 40px;
      object-fit: contain;
    }
    .el-upload-list__item-name{
      line-height: 40px;
      // display: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  //弹窗
  .iptSmall{
    width: 250px;
    margin-right: 20px;
  }
  ::v-deep.el-dialog__header{
    border: 1px solid #DCDFE6;
  }
  .addDialog{
    ::v-deep.el-dialog{
      height: 550px;
    }
    ::v-deep.el-dialog__body{
      padding: 20px;
    }
  }
  .dialogSee{
    ::v-deep.el-dialog{
      height: 560px;
    }
  }
}
</style>
